<template>
	<view class="uni-searchbar">
		<view :style="{ borderRadius: radius + 'upx', backgroundColor: bgColor, borderColor: borderColor }" class="uni-searchbar__box" @click="searchClick">
			<!-- #ifdef MP-ALIPAY -->
			<view class="uni-searchbar__box-icon-search"><uni-icons color="#999999" size="18" type="search" /></view>
			<!-- #endif -->
			<!-- #ifndef MP-ALIPAY -->
			<uni-icons color="#999999" class="uni-searchbar__box-icon-search" size="18" type="search" />
			<!-- #endif -->
			<input
				v-if="show"
				:focus="showSync"
				@blur="cancel"
				:placeholder="placeholder"
				:maxlength="maxlength"
				@confirm="confirm"
				class="uni-searchbar__box-search-input"
				confirm-type="search"
				type="text"
				v-model="searchVal"
			/>
			<text v-else class="uni-searchbar__text-placeholder">{{ placeholder }}</text>
			<view v-if="show && (clearButton === 'always' || (clearButton === 'auto' && searchVal !== ''))" class="uni-searchbar__box-icon-clear" @click.stop="clear">
				<uni-icons color="#999999" class="" size="24" type="clear" />
			</view>
		</view>
		<text @click="cancel" class="uni-searchbar__cancel" v-if="cancelText == '取消' && (cancelButton === 'always' || (show && cancelButton === 'auto'))">{{ cancelText }}</text>
		<text v-if="cancelText == '搜索'" @click="search" class="uni-searchbar__cancel">{{ cancelText }}</text>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';
export default {
	name: 'UniSearchBar',
	components: {
		uniIcons
	},
	props: {
		placeholder: {
			type: String,
			default: '请输入搜索内容'
		},
		radius: {
			//搜索栏圆角，单位upx
			type: [Number, String],
			default: 10
		},
		clearButton: {
			//是否显示清除按钮，可选值always-一直显示、auto-输入框不为空时显示、none-一直不显示
			type: String,
			default: 'auto'
		},
		cancelButton: {
			//是否显示取消按钮，可选值always-一直显示、auto-输入框不为空时显示、none-一直不显示
			type: String,
			default: 'auto'
		},
		cancelText: {
			//取消文字内容
			type: String,
			default: '取消'
		},
		bgColor: {
			//输入框背景颜色
			type: String,
			default: '#F8F8F8'
		},
		borderColor: {
			//输入框边框颜色
			type: String,
			default: '#F8F8F8'
		},
		maxlength: {
			//输入最大长度
			type: [Number, String],
			default: 100
		}
	},
	data() {
		return {
			show: false,
			showSync: false,
			searchVal: ''
		};
	},
	watch: {
		searchVal() {
			this.$emit('input', {
				value: this.searchVal
			});
		}
	},
	methods: {
		searchClick() {
			if (this.show) {
				return;
			}
			this.searchVal = '';
			this.show = true;
			this.$nextTick(() => {
				this.showSync = true;
			});
		},
		clear() {
			this.searchVal = '';
			this.show = false;
			this.showSync = false;
			this.$emit('cancel', {
				value: this.searchVal
			});
			this.$forceUpdate();
		},
		cancel() {
			if (!this.searchVal) {
				this.$emit('cancel', {
					value: this.searchVal
				});
				this.searchVal = '';
				this.show = false;
				this.showSync = false;
				// #ifndef APP-PLUS
				uni.hideKeyboard();
				// #endif
				// #ifdef APP-PLUS
				plus.key.hideSoftKeybord();
				// #endif
			}
		},
		confirm() {
			// #ifndef APP-PLUS
			uni.hideKeyboard();
			// #endif
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
			this.$emit('confirm', {
				value: this.searchVal
			});
		},
		search() {
			this.$emit('confirm', { value: this.searchVal });
		}
	}
};
</script>

<style lang="scss" scoped>
$uni-searchbar-height: 60upx;

.uni-searchbar {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	position: fixed;
	z-index: 999;
	left: 0;
	width: calc(100% - 60upx);
	flex-direction: row;
	padding: 20upx 30upx;
	background-color: $uni-bg-color;
	/* #ifdef APP-PLUS */
	top: 0upx;
	/* #endif */
	/* #ifdef H5 */
	top: 88upx;
	/* #endif */
}

.uni-searchbar__box {
	/* #ifndef APP-NVUE */
	display: flex;
	box-sizing: border-box;
	/* #endif */
	overflow: hidden;
	position: relative;
	flex: 1;
	justify-content: center;
	flex-direction: row;
	align-items: center;
	height: $uni-searchbar-height;
	padding: 10upx 16upx 10upx 0px;
	border-width: 1upx;
	border-style: solid;
	border-color: $uni-border-color;
}

.uni-searchbar__box-icon-search {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	width: 32px;
	justify-content: center;
	align-items: center;
	color: $uni-text-color-placeholder;
}

.uni-searchbar__box-search-input {
	flex: 1;
	font-size: $uni-font-size-base;
	color: $uni-text-color;
}

.uni-searchbar__box-icon-clear {
	align-items: center;
	line-height: 48upx;
	padding-left: 10upx;
}

.uni-searchbar__text-placeholder {
	font-size: $uni-font-size-base;
	color: $uni-text-color-placeholder;
	margin-left: 10upx;
}

.uni-searchbar__cancel {
	padding-left: 20upx;
	line-height: $uni-searchbar-height;
	font-size: 28upx;
	color: $uni-text-color;
}
</style>
